import styles from './index.module.scss'
import Button from '@c/button'
import message from '@c/message'
import { dianboGetSource } from '@/api/vod'
import { useRouter } from 'next/router'
import { useShowLogin } from '@/utils/hooks'
import { useState } from 'react'
import cm from 'classnames'

const Index = props => {
  const showLogin = useShowLogin()
  const router = useRouter()
  const [isAsk, setAsk] = useState(false)
  const { id } = router.query
  const { data } = props
  const obj = data?.length ? data[0] : {}

  // 求片
  const getUrl = async () => {
    if (!localStorage.getItem('token')) {
      showLogin()
      return
    }
    if (isAsk) {
      return
    }
    const res = await dianboGetSource({
      cid: parseInt(id),
      eid: obj.eid
    })
    if (res.code === 0) {
      message({ content: '已收到您的求片，片源加急补充中~' })
      setAsk(true)
    }
  }

  return (
    <div className={styles.click}>
      <p className={styles.getVipText}>该影视暂无可播线路，看看其他内容吧~</p>
      <Button hover="opacity" className={cm(styles.getVip, isAsk ? styles.getViped : '')} onClick={getUrl}>
        {isAsk ? '已求片' : '求片'}
      </Button>
    </div>
  )
}

export default Index
